<!-- form-item -->
<template>
  <el-form-item
    :label="item.label"
    :prop="item.prop"
    :label-width="item.labelWidth"
  >
    <el-input
      v-if="item.type === 'input'"
      v-model="formDatas[item.prop]"
      :disabled="item.disabled"
      :maxlength="item.maxLength || '50'"
      :type="item.dataType || 'text'"
      clearable
      :placeholder="item.placeholder || '请输入'"
      v-bind="item.attrs"
      v-on="item.events || {}"
    />
    <el-input-number
      v-else-if="item.type === 'number'"
      v-model.number="formDatas[item.prop]"
      :min="item.min || 0"
      :max="item.max"
      :step="item.step || 0.01"
      :disabled="item.disabled"
      :controls="item.controls || true"
      :placeholder="item.placeholder || '请输入'"
      v-bind="item.attrs"
      v-on="item.events || {}"
    />
    <el-input
      v-else-if="item.type === 'textarea'"
      v-model="formDatas[item.prop]"
      :disabled="item.disabled"
      :rows="item.rows || 2"
      :autosize="item.autosize === false ? false : item.autosize || true "
      :maxlength="item.maxLength || 200"
      show-word-limit
      type="textarea"
      placeholder="请输入"
      v-bind="item.attrs"
      v-on="item.events || {}"
    />
    <el-select
      v-else-if="item.type === 'select'"
      v-model="formDatas[item.prop]"
      :disabled="item.disabled"
      :multiple="item.multiple"
      placeholder="请选择"
      :filterable="item.filterable"
      :clearable="item.clearable"
      :collapse-tags="item.collapse ||item.collapsetags"
      style="width:100%; height: 100%"
      v-bind="item.attrs"
      v-on="item.events || {}"
    >
      <template v-if="item.options">
        <el-option
          v-for="obj in item.options"
          :key="item.valueKey ? obj[item.valueKey] : obj.value"
          :label="item.labelKey ? obj[item.labelKey] : obj.label"
          :value="item.valueKey ? obj[item.valueKey] : obj.value"
        />
      </template>
    </el-select>

    <el-radio-group v-else-if="item.type === 'radio'" v-model="formDatas[item.prop]" v-bind="item.attrs" v-on="item.events || {}">
      <el-radio
        v-for="obj in item.options"
        :key="item.labelKey ? obj[item.labelKey] : obj.label"
        :label="item.labelKey ? obj[item.labelKey] : obj.label"
      >{{ item.nameKey ? obj[item.nameKey] : obj.name }}</el-radio>
    </el-radio-group>

    <el-checkbox-group v-else-if="item.type === 'checkbox'" v-model="formDatas[item.prop]" v-bind="item.attrs" v-on="item.events || {}">
      <el-checkbox
        v-for="obj in item.options"
        :key="item.labelKey ? obj[item.labelKey] : obj.label"
        :label="item.labelKey ? obj[item.labelKey] : obj.label"
      >{{ item.nameKey ? obj[item.nameKey] : obj.name }}</el-checkbox>
    </el-checkbox-group>

    <el-cascader
      v-else-if="item.type === 'cascader'"
      v-model="formDatas[item.prop]"
      :props="{ checkStrictly: true }"
      :options="item.options"
      clearable
      style="width:100%; height: 100%"
      v-on="item.events || {}"
    />

    <el-date-picker
      v-else-if="item.type === 'time'"
      v-model="formDatas[item.prop]"
      :disabled="item.disabled"
      :clearable="item.clearable"
      :type="item.type || 'date'"
      placeholder="选择日期"
      style="width:100%; height: 100%"
      :picker-options="item.pickerOptions || {}"
      :value-format="item.valueFormat || 'yyyy-MM-dd'"
      v-bind="item.attrs"
      v-on="item.events || {}"
    />
    <el-switch
      v-else-if="item.type === 'switch'"
      v-model="formDatas[item.prop]"
      :active-text="formDatas[item.prop] === (item.activeVal || true) ? item.activeText || '是': item.inactiveText ||'否'"
      :active-value="item.activeVal !== undefined ? item.activeVal : true"
      :inactive-value="item.inactiveVal !== undefined ? item.inactiveVal : false"
      v-bind="item.attrs"
      v-on="item.events || {}"
    />

    <slot v-else-if="item.type === 'slot'" :name="item.prop" :item="item" :form-data="formDatas" />

  </el-form-item>
</template>

<script>
export default {
  name: 'FormItem',
  components: {},
  props: {
    item: { type: Object, default: () => {} },
    formDatas: { type: Object, default: () => {} }
  },
  data() {
    return {
    }
  },

  computed: {},

  mounted() {},

  methods: {}
}

</script>
<style lang='scss' scoped>
</style>
